<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>Starter Template for Bootstrap</title>
    <link type="text/css" rel="stylesheet" href="css/consolepanel.css" />
    <style>
      /** 清除内外边距 **/
      body{
          margin: 0;
          padding: 0;
          overflow:hidden;
      }
    </style>
  </head>
  <body>
    <!-- 第一步: 先配置一个canvas标签,并设置id  -->
    <canvas id="canvas"></canvas>

    <script type="text/javascript" src="src/consolepanel.js"></script>
    <script type="text/javascript" src="src/ctopo.js"></script>
    <script type="text/javascript">
      var tp;  //拓扑对象
      var option = {
          id:"canvas",    //说明: canvas标签的id,     写法: canvas , #canvas
          width:"auto",   //说明: canvas的宽度,       写法: 500,500px,50%,auto,默认auto
          height:"auto",  //说明: canvas的高度,       写法: 500,500px,50%,auto,默认auto
          isOnAnimateBall:true,      //说明: 是否启动连线的动画球 写法: true,false,  默认:false
          isShowConsolePanel:true,   //说明: 是否显示控制台,      写法: true,false,  默认true
          isHoverNodeLight:true,     //说明: 是否悬停节点高亮,    写法: true,false,  默认true
          isShowNodeLabel:true,      //说明: 是否显示节点文字,    写法: true,false,  默认true
          isShowNodeTooltip:false,   //说明: 是否显示节点提示框,  写法: true,false,  默认false
          isShowEdgeLabel:false,     //说明: 是否显示连线文字,    写法: true,false,  默认false
          isShowEdgeTooltip:false,   //说明: 是否显示连线提示框,  写法: true,false,  默认false
          isShowEdgeArrow:false,     //说明: 是否显示连线箭头,    写法: true,false,  默认false
          style:{                    //说明: 全局样式
            global:{
              backgroundColor:"#ffffff",  //说明: 支持fillstyle所有原生写法, 例: rgba(255,255,255,1),默认#ffffff
              backgroundImage:"image/ctopobg.png", //说明: 背景网格线, 默认为null
              backgourndImageOpacity:0.3, //说明: 背景网格线透明度, 配置了backgroundImage此字段才有效, 默认0.3
                                          //备注: backgroundColor灰,白,0.5美观;backgroundColor黑色,蓝色,0.2美观
              tooltipBackgroundColor:"rgba(0, 0, 0, 0.7)", //说明: 悬停提示的背景色样式,默认rgba(0, 0, 0, 0.7)
              tooltipColor:"rgb(255, 255, 255)"  //说明: 悬停提示的文字样式,默认rgb(255, 255, 255)
            },
            node:{
              color:"#00adee",     //说明: 节点颜色, 支持fillstyle所有原生写法, 优先级低于节点自带属性, 默认#00adee
              size:20,             //说明: 节点直径, 优先级低于节点自带属性, 默认20px,
              textColor:"#878787", //说明: 节点Label颜色, 优先级低于节点自带属性, 默认#878787
              textSize:20          //说明: 节点Label字体大小, 优先级低于节点自带属性, 默认10px
            },
            edge:{
              color:"#c2c2c2",     //说明: 连线颜色, 支持fillstyle所有原生写法, 优先级低于节点自带属性, 默认#c2c2c2
              size:1,              //说明: 连线宽度, 优先级低于节点自带属性, 默认1px
              textColor:"#878787", //说明: 节点Label颜色, 优先级低于节点自带属性, 默认#878787
              textSize:10          //说明: 节点Label字体大小, 优先级低于节点自带属性, 默认10px
            }
          },
          layout:{
            name:"preset",          //说明: 布局方式,支持force力导向和preset预设, 默认force
            param:{
              isScale : false,     //说明: 默认第一次应用布局,是否自适应屏幕宽高,等比例缩放,默认false
              isRandom : false,    //说明: 默认初始位置是随机Random还是定位location,默认false
              initAreaW : 100,     //说明: 初始分布是的初始宽,默认100px
              initAreaH : 56,      //说明: 初始分布是的初始高,默认56px
              energy:0.5,          //说明: 能量值范围0.3-1,  默认0.5
              iterations :150,     //说明: 力导向的迭代次数,默认150
              ejectFactor : 2,     //说明: 默认斥力常量,默认2
              ejectRange : 250,    //说明: 最大斥力范围,超过的不计算节点间斥力,默认2
              ejectFadeRange : 30, //说明: 节点簇的减弱范围,此范围内ejectFactor-1,默认30
              condenseFactor : 1,  //说明: 默认引力常量,默认1
              maxtx : 3,           //说明: 每次迭代的x方向最大移动距离,默认3
              maxty : 1.68         //说明: 每次迭代的y方向最大移动距离,默认1.68
            }
          },
          data:{                     //说明: 数据格式

            nodes:[
              {
                id:"节点id",         //说明: 必填项, 节点id, 必须唯一
                x:0,                 //说明: 节点x坐标,
                y:0,                 //说明: 节点y坐标,
                label:"显示标签",    //说明: 显示标签, 默认null
                tooltip:"悬停文字",  //说明: 悬停文字, 默认null
                color:"#00adee",     //说明: 节点颜色, 支持fillstyle所有原生写法, 优先级高于全局样式, 不配置默认等于全局样式
                size:20,             //说明: 节点直径, 优先级高于全局样式, 不配置默认等于全局样式
                textColor:"#878787", //说明: 节点Label颜色, 优先级高于全局样式, 不配置默认等于全局样式
                textSize:10,          //说明: 节点Label字体大小, 优先级高于全局样式, 不配置默认等于全局样式
                //保留字段           //说明:  保留字段不可使用
                                     //       originalColor=color,保存初始颜色,方便颜色变换
                                     //       dispx,dispy,布局运算时的偏移量
                //支持自定义字段     //说明:
                                     //       (1)不支持函数形式的自定义字段,基本类型,对象,数组都行
                                     //       (2)不可以和保留字段重名
                customField1:"fieldl",
                customField2:["field2_1","field2_2"],
                customField3:{field3_1:"field3_1",field3_2:"field3_2"}
              }
            ],
            edges:[
              {
                source:"开始节点id", //说明: 必填项, 开始节点id
                target:"结束节点id",  //说明: 必填项, 结束节点id
                label:"显示标签",    //说明: 显示标签, 默认null
                tooltip:"悬停文字",  //说明: 悬停文字, 默认null
                color:"#c2c2c2",     //说明: 连线颜色, 支持fillstyle所有原生写法, 优先级高于全局样式, 不配置默认等于全局样式
                size:1,               //说明: 连线宽度, 优先级高于全局样式, 不配置默认等于全局样式
                textColor:"#878787", //说明: 节点Label颜色, 优先级高于全局样式, 不配置默认等于全局样式
                textSize:10,          //说明: 节点Label字体大小, 优先级高于全局样式, 不配置默认等于全局样式
                //保留字段           //说明: 保留字段不可使用
                                     //       originalColor=color,保存初始颜色,方便颜色变换
                                     //       sourceIndex,targetIndex=开始和结束节点在nodes数组的索引值
                //支持自定义字段     //说明:
                                     //       (1)不支持函数形式的自定义字段,,基本类型,对象,数组都行
                                     //       (2)不可以和保留字段重名
                customField1:"fieldl",
                customField2:["field2_1","field2_2"],
                customField3:{field3_1:"field3_1",field3_2:"field3_2"}
              }
            ]

          },
          event:{                    //说明: 监听回调
            steerwheel:function(keyCode){     //说明: 上下左右的平移回调, keyCode等于上下左右的键盘按键
            console.log("steerwheel",keyCode);
            },
            scale:function(prevScale,scale){  //说明: 放大,缩小的回调, prevScale=上一次的比例,scale=当前比例
              console.log("scale",scale);
            },
            clickNode:function(e,node){       //说明: 点击节点的回调, e=event,node=被点击节点
              console.log(node);
            },
            hoverNode:function(e,node){       //说明: 悬停节点的回调, e=event,node=被悬停节点
              console.log(node);
            },
            leaveNode:function(e){            //说明: 离开节点的回调, e=event
              console.log(e);
            },
            clickEdge:function(e,edge){       //说明: 点击连线的回调, e=event,edge=被点击连线
              console.log(edge);
            },
            hoverEdge:function(e,edge){       //说明: 悬停连线的回调, e=event,edge=被悬停连线
              console.log(edge);
            },
            leaveEdge:function(e){            //说明: 离开连线的回调, e=event
              console.log(e);
            }
          }
      };

      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
          if(xhr.readyState==4){
              var json = JSON.parse(xhr.responseText);

              //第一步: 转本页第17行

              //第二步: 绑定数据
              option.data=json;

              //第三步: 构建ctopo绘制canvas
              tp = ctopo(option);

              //api接口演示
              api();
          }
      }
     xhr.open('GET','../../data_small_api.json',true);
    xhr.send();


      /**
       * api示例
       * https://github.com/tm-roamer/ctopo 有api手册
       */
      function api(){
          /**
           *  添加连线
           *  参数: edge 连线对象; isDrawNow 是否立刻重绘
           *  返回值: 无
           */
          //tp.addEdge({source:"1",target:"2",color:"#fbae17"},true);
          /**
           *  添加连线
           *  参数: node 节点对象; isDrawNow 是否立刻重绘
           *  返回值: 无
           */
          //tp.addNode({id:"5",x:200,y:100,label:"The New",color:"#fbae17"},true);
          /**
           *  重新绘制画布,用法等于ctopo(option)
           *  参数: option 初始的配置对象
           *  返回值: 无
           */
          //tp.draw(option);
          /**
           *  局部刷新,只刷新数据
           *  参数: data 数据格式等于 optioin.data
           *        isApplyLayout 是否重新应用布局
           *  返回值: 成功true,失败false
           */
          //option.data.nodes.push({id:"6",x:200,y:100,label:"The Update 6",color:"#ca4258"});
          //option.data.nodes.push({id:"7",x:250,y:200,label:"The Update 7",color:"#ca4258"});
          //option.data.edges.push({source:"6",target:"7",color:"#ef0a0a"});
          //tp.drawData(option.data,false);
          /**
           *  取得连线对象(区分方向)
           *  参数: sid 开始节点id; tid 结束节点id
           *  返回值: 查到:连线对象; 没查到: null
           */
          //var edge  = tp.edge("3","4");
          //console.log(edge);
          /**
           *  取得连线数组
           *  参数: 无
           *  返回值: 连线数组
           */
          //var edges  = tp.edgeArray();
          //console.log(edges.length);
          /**
           *  返回与之关联的连线和节点数组
           *  参数: nid 待匹配的节点id
           *  返回值: 查到:关联数据对象;<br/>没查到:空数组对象
           *          { edgeNeighbors : [], nodeNeighbors : [] }
           */
          //var neighbors = tp.firstNeighbors("3");
          //console.log(neighbors);
          /**
           *  重置切换布局
           *  参数: (可选)layout==option.layout
           *  返回值: 无参数: 返回option.layout
           *          有参数: 重置布局,成功true,失败false
           */
          //var layout = tp.layout();
          //layout.param.energy=1;
          //tp.layout(layout);
          /**
           *  取得节点对象
           *  参数: id 节点id
           *  返回值: 查到:节点对象; 没查到: null
           */
          //var node  = tp.node("4");
          //console.log(node);
          /**
           *  设置节点标签是否显示
           *  参数: visible 是否显示标签,布尔型true,false
           *  返回值: 无
           */
          //tp.nodeLabelsVisible(false);
          /**
           *  设置连线标签是否显示
           *  参数: visible 是否显示标签,布尔型true,false
           *  返回值: 无
           */
          //tp.edgeLabelsVisible(false);
          /**
           *  设置连线箭头是否显示
           *  参数: visible 是否显示箭头,布尔型true,false
           *  返回值: 无
           */
          //tp.edgeArrowsVisible(false);
          /**
           *  取得节点数组
           *  参数: 无
           *  返回值: 节点数组
           */
          //var nodes  = tp.nodeArray();
          //console.log(nodes.length);
          /**
           *  设置节点提示框是否显示
           *  参数: visible 是否显示提示框,布尔型true,false
           *  返回值: 无
           */
          //tp.nodeTooltipsVisible(false);
          /**
           *  设置连线提示框是否显示
           *  参数: visible 是否显示提示框,布尔型true,false
           *  返回值: 无
           */
          //tp.edgeTooltipsVisible(false);
          /**
           *  设置连线动画球是否显示
           *  参数: visible 是否显示动画球,布尔型true,false
           *  返回值: 无
           */
          //tp.edgeAnimateBallsVisible(false);
          /**
           *  设置控制台是否显示
           *  参数: visible是否显示控制台,<br/>布尔型true,false
           *  返回值: 无
           */
          //tp.consolePanelVisible(false);
          /**
           *  删除连线
           *  参数: sid 开始节点id; tid 结束节点id; isDrawNow 是否立刻重绘
           *  返回值: 无
           */
          //tp.removeEdge("3","4",true);
          /**
           *  删除节点,与之关联的线也删除
           *  参数: id 节点id; isDrawNow 是否立刻重绘
           *  返回值: 无
           */
          //tp.removeNode("3",true);
          /**
           *  更新连线
           *  参数: edge 连线对象; isDrawNow 是否立刻重绘
           *  返回值: 无
           */
          //var edge = {source:"3",target:"4",color:"#ef0a0a"};
          //tp.updateEdge(edge,true);
          /**
           *  更新节点
           *  参数: node 节点对象; isDrawNow 是否立刻重绘
           *  返回值: 无
           */
          //var node = {id:"1",color:"#fbae17"};
          //tp.updateNode(node,false);
          /**
           *  重置切换样式
           *  参数: (可选)style==option.style
           *  返回值: 无参数: 返回option.style
           *          有参数: 重置样式,成功true,失败false
           */
          //var style = tp.style();
          //style.global.backgroundColor="#252525";
          //tp.style(style);
          /**
           *  设置缩放比例(0-1)
           *  参数: (可选)zoom==缩放比例
           *  返回值: 无参数: 返回缩放比例
           *          有参数: 设置缩放,成功true,失败false
           */
          //var scale = tp.zoom();
          //tp.zoom(scale+0.1);

      } // end api


    </script>
  </body>
</html>
